<template>
    <!-- 证件认证 -->
    <div class="certificateauth">
        <pagetitle></pagetitle>
        <el-form ref="formRef" :model="pageData" label-position="right" label-width="130px" class="demo-ruleForm">
            <el-card class="sectionCard">
                <div class="userMsgBox">
                    <div class="userMsgTitle">
                        <span class="stitle">申请认证个人</span>
                    </div>
                    <el-form-item label="真实姓名：">
                        <el-input v-model="pageData.userName" class="certificateInput" placeholder="申请人的姓名" />
                    </el-form-item>
                    <el-form-item label="证件号码：">
                        <el-input v-model="pageData.cardId" class="certificateInput" placeholder="申请人的中华人民共和国居民身份证号码" />
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="sectionCard">
                <div class="userMsgBox">
                    <div class="userMsgTitle">
                        <span class="stitle">个人常住或服务地址</span>
                    </div>
                    <el-form-item label="常驻地址：">
                        <div>
                            <addRess :value="pageData.addressCode" :getAreaData="getAreaData"></addRess>
                            <div class="addressinput">
                                <el-input v-model="pageData.add" class="certificateInput" placeholder="请输入具体的组、社、地名等信息" />
                            </div>
                        </div>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="sectionCard">
                <div class="userMsgBox">
                    <div class="userMsgTitle">
                        <span class="stitle">个人身份证件</span>
                    </div>
                    <el-form-item label="">
                        <div>
                            <div class="uploadcertificate">
                                <div class="uploadcertificateItem">
                                    <div class="uploadcertificateTitle">居民身份证正面照片</div>
                                    <uploadFile :fileUrl="pageData.cardPositive" @callBack="uploadFiles" tableItem="cardPositive" width="240px" height="150px" :showIcon="false"></uploadFile>
                                </div>
                                <div class="uploadcertificateItem">
                                    <div class="uploadcertificateTitle">居民身份证反面照片</div>
                                    <uploadFile :fileUrl="pageData.cardBack" @callBack="uploadFiles" tableItem="cardBack" width="240px" height="150px" :showIcon="false"></uploadFile>
                                </div>
                                <div class="uploadcertificateItem">
                                    <div class="uploadcertificateTitle">手持居民身份证正面照片</div>
                                    <uploadFile :fileUrl="pageData.cardHold" @callBack="uploadFiles" tableItem="cardHold" width="240px" height="150px" :showIcon="false"></uploadFile>
                                </div>
                            </div>
                            <div class="certificateInputTip" style="font-style: 12px">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                            <div class="certificateInputTip" style="font-style: 12px">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水印；但不能遮挡关键信息，例如姓名、证件号。</div>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="">
                        <div class="hr"></div>
                        <div class="pageBtns">
                            <el-button type="primary" plain round @click="router.back()">返回</el-button>
                            <el-button type="primary" plain round @click="dialogVisible = true">认证通过</el-button>
                            <el-button type="primary" plain round @click="dialogVisible1 = true">认证不通过</el-button>
                        </div>
                    </el-form-item> -->
                    <div class="subpageBtnBox">
                        <el-button type="primary" plain @click="router.back()">返回</el-button>
                        <el-button type="primary" plain @click="dialogVisible = true">认证通过</el-button>
                        <el-button type="primary" plain @click="dialogVisible1 = true">认证不通过</el-button>
                    </div>
                </div>
            </el-card>
        </el-form>
        <!-- 认证通过 -->
        <el-dialog v-model="dialogVisible" title="个人认证 审核通过" width="600px" center :show-close="false">
            <div class="dialogCenter">
                <el-icon color="#23b14d" size="48px"><CircleCheckFilled /></el-icon>
                <div class="dialogCentertext">
                    个人认证 申请平台审核 <span>已经通过</span>
                    <p>您审核通过<span> szfarm </span>个人认证审核，开通个人功能</p>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain @click="dialogVisible = false">发送消息</el-button>
                    <el-button type="primary" plain @click="dialogVisible = false"> 返回 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 认证不通过 -->
        <el-dialog v-model="dialogVisible1" title="消 息" width="600px" center :show-close="false">
            <div class="dialogCenter">
                <div class="dialogCentercheckbox">
                    <div class="dialogCentertitle">在 个人认证 过程中，因为您提供的：</div>
                    <div class="dialogCentercheckboxItem">
                        <el-checkbox v-model="pageData.checked1" label="证件模糊；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="证件号码与输入号码不一致；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="无法确认是否本人手持证件照；" /><br />
                        <el-checkbox v-model="pageData.checked1"> <input type="text" class="dialogInput" placeholder="请输入其他原因" />。 </el-checkbox>
                    </div>
                    <div class="dialogCenterTip">造成 <span>个人实名认证</span> 未能通过，请核实后再提交申请。</div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain @click="dialogVisible1 = false">认证不通过</el-button>
                    <el-button type="primary" plain @click="dialogVisible1 = false"> 返回 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const cardTypeIndex: any = ref("");
const cardType = ref(["中国大陆居民身份证", "护照", "居住证"]);
const pageData: any = reactive({
    certificateType: "中国大陆居民身份证", // 证件类型
    cardId: "", // 身份证号码
    userName: "", // 用户名
    cardPositive: "", // 身份证正面
    cardBack: "", // 身份证背面
    cardHold: "", // 身份证手持
    headPortrait: "", // 头像
    address: "", // 地址
    addressCode: "", // 地址code
    add: "", // 详细地址
});

// 文件上传回调
const uploadFiles = (path: string, doc: string) => {
    console.log(path, doc);
    pageData[doc] = path;
};

// 选择地址回调
const getAreaData = (data: any) => {
    console.log(data);
    pageData.address = data.valueText;
    pageData.addressCode = data.keyText;
};
</script>
<style lang="scss" scoped>
.sectionCard {
    margin-bottom: 20px;
    .userMsgBox {
        .userMsgTitle {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            .stitle {
                font-size: 14px;
                font-weight: bold;
                color: #252b3a;
                margin-right: 10px;
            }
            .stip {
                padding: 3px 10px;
                background: #f1f1f1;
                border-radius: 4px 4px 4px 0px;
                font-size: 10px;
                color: #252b3a;
                margin-left: 5px;
            }
        }
        .certificateInput {
            width: 500px;
        }
        .certificateInputTip {
            margin-left: 10px;
            font-size: 12px;
            color: #999999;
        }
        .addressinput {
            margin-top: 10px;
        }
        .uploadcertificate {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            margin-bottom: 10px;
            .uploadcertificateItem {
                margin-right: 30px;
                background-repeat: no-repeat;
                background-size: 154px 97px;
                background-position: 50% 70%;
                &:nth-child(1) {
                    background-image: url(@/assets/image/card2.png);
                }
                &:nth-child(2) {
                    background-image: url(@/assets/image/card1.png);
                }
                &:nth-child(3) {
                    background-image: url(@/assets/image/card3.png);
                }
                .uploadcertificateTitle {
                    text-align: center;
                    font-size: 14px;
                    color: #666666;
                    margin-bottom: 10px;
                }
            }
        }
    }
    // .pageBtns {
    //     padding-left: 130px;
    // }
    .hr {
        width: 100%;
        height: 1px;
        border: 1px dashed #cccccc;
        margin-bottom: 22px;
    }
}
.dialogCenter {
    text-align: center;
    .dialogCentertext {
        margin-top: 20px;
        font-size: 16px;
        span {
            color: #ff0000;
        }
        p {
            font-size: 14px;
            margin-top: 10px;
        }
    }
    .dialogCentertitle {
        font-size: 16px;
        margin-bottom: 20px;
        text-align: left;
    }
    .dialogCentercheckbox {
        width: 444px;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
        .dialogCentercheckboxItem {
            // height: 188px;
            border: 1px solid #cccccc;
            margin-bottom: 10px;
            text-align: left;
            padding-left: 50px;
            padding-top: 20px;
            padding-bottom: 20px;
            .dialogInput {
                background: none;
                border: none;
                border-bottom: 1px solid #cccccc;
                width: 330px;
            }
        }
        .dialogCenterTip {
            text-align: left;
            color: #666666;
            font-size: 14px;
            span {
                color: #333333;
            }
        }
    }
}
</style>
